$(function(){
    //1. 鼠标移动显示,离开隐藏
    $('.zoom').on('mouseover',function(){
        $('.move').show();
        $('.big').show();
    });
    $('.zoom').on('mouseleave',function(){
        $('.move').hide();
        $('.big').hide();
    });

    let offsetLeft=$('.zoom').offset().left;
    let offsetTop=$('.zoom').offset().top;
    let moveWidth=$('.move').outerWidth();
    let moveHight=$('.move').outerHeight();

    //小图的移动距离
    let maxmoveX=$('.zoom').outerWidth()-moveWidth;
    let maxmoveY=$('.zoom').outerHeight()-moveHight;

    //大图的移动距离
    let  maxmoveX2=$('.bigpig').outerWidth()-$('.big').outerWidth();

    $('.zoom').on('mousemove',function(e){
        let x=e.pageX-offsetLeft-moveWidth/2;
        let y=e.pageY-offsetTop-moveHight/2;
        if(x<=0){
            x=0+"px";
        }else if(x>maxmoveX){
            x=maxmoveX+"px";
        }else{
            x=x+"px";
        }

        if(y<=0){
            y=0+"px";
        }else if(y>maxmoveY){
            y=maxmoveY+"px";
        }else{
            y=y+"px";
        }
        $(".move").css('left',x);
        $(".move").css('top',y);

        //大图的移动距离
        let bigX=(-parseInt(x)*maxmoveX2/maxmoveX)+"px";
        let bigY=(-parseInt(y)*maxmoveX2/maxmoveY)+"px";
        $('.bigpig').css('left',bigX);
        $('.bigpig').css('top',bigY);
    });
});